<template>
  <div>
    <!-- 组件 -->
    <!-- <my-card>
      <template #title>
        <button>我是按钮</button>
        <h2>无题</h2>
      </template>

      <template #body>
        <p>今天天气十分好</p>
        <p>利群来到桃花岛</p>
        <p>看到传鹏在洗澡</p>
        <p>跳到水里一起抱</p>
      </template>
    </my-card> -->

    <!-- #名字 上面是简写形式 -->
    <!-- 下面是完整形式 -->
    <my-card>
      <template v-slot:title>
        <button>我是按钮</button>
        <h2>无题</h2>
      </template>

      <template v-slot:body>
        <p>今天天气十分好</p>
        <p>利群来到桃花岛</p>
        <p>看到传鹏在洗澡</p>
        <p>跳到水里一起抱</p>
      </template>

      <!-- 但凡没给名字的都是给默认插槽 -->
      <h4>我是h4</h4>
      <h5>我是h5</h5>

      <!-- 其实默认插槽也有名字，只不过名字叫default -->
      <!-- <template #default>
        <h4>我是h4</h4>
        <h5>我是h5</h5>
      </template> -->
    </my-card>
  </div>
</template>

<script>
import MyCard from './components/MyCard.vue'
export default {
  components: {
    MyCard
  }
}
</script>

<style></style>
